<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="./jquery.min.js"></script>
</head>
<body>

<script>
  //  页面加载事件  页面加载完毕后执行function 中的代码
  // $(document).ready(function (){
  //   let $p =  $('p')
  //   console.log($p)
  // })

  // 页面加载事件的简化写法
  $(function (){

    let $p =  $('p')
    console.log($p)

    let $dv = $('#dv1')
    console.log($dv)

    let $sp1 = $('.sp1')
    console.log($sp1)
    console.log("---------------------")
    let $sp2 = $('.sp2')
    console.log($sp2)

    let $sps = $('span.sp1')
    console.log($sps)
  })


</script>

<p>hello jquery</p>
<p class="sp1">hello jquery</p>
<div id="dv1">hello jquery2</div>
<span class="sp1">hello jquery3</span>
<span class="sp2">hello jquery4</span>

</body>
</html>